<template>
  <div class="cms-views-container bg-[#f8f8f8] novel-detail-pages">
    <CmsVideoHeader :title="'小说名称'" showShare :text="{ color: '#48494D', backgroundColor: 'white' }" />
    <!-- 小说图片 -->
    <CmsArticleImg />
    <!-- 小说标签 -->
    <CmsArticleTags
      :type="1"
      @click="handleClick('articleTabBar')"
      :class="{ 'component-selected': select === 'articleTabBar' }"
    />
    <!-- 小说状态 -->
    <CmsArticleState />

    <!-- 小说简介 -->
    <CmsArticleIntroduction
      :type="1"
      showExpand
      :text="{ backgroundColor: 'white' }"
      @click="handleClick('briefIntroductionContent')"
      :class="{ 'component-selected': select === 'briefIntroductionContent' }"
    />

    <!-- 阅读组件 -->
    <CmsFavoritesRead
      :type="1"
      @click="handleClick('collectionReading')"
      :class="{ 'component-selected': select === 'collectionReading' }"
    />
    <div v-if="type === 2" class="absolute top-0 left-0 right-0 w-full h-full mask-box"></div>

    <CmsBuyOrder :type="2" titleType="小说" v-if="type === 2" />
  </div>
</template>

<script setup lang="ts">
import { withDefaults } from 'vue'
import CmsComponents from '@cms/components'

import type { ComponentKeys } from '@cms/h5-editor'

const {
  CmsBuyOrder,
  CmsArticleTags,
  CmsProfileButton,
  CmsFavoritesRead,
  CmsVideoHeader,
  CmsArticleImg,
  CmsArticleState,
  CmsArticleIntroduction
} = CmsComponents

withDefaults(defineProps<{ type: number; select?: ComponentKeys | undefined }>(), { type: 1 })

const emit = defineEmits<{
  (event: 'select', key: ComponentKeys): void
}>()

const handleClick = (key: ComponentKeys) => {
  emit('select', key)
}
</script>

<style scoped lang="less">
.novel-detail-pages {
  .novel-type-item {
    span {
      border: 1px solid #ffcdc2;
    }
  }
  .detail-line {
    border-bottom: 1px solid #f1f3f7;
  }

  .mask-box {
    background: rgba(0, 0, 0, 0.3);
  }
}
</style>
